<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
  <title>蜜雪冰城</title>
  <link rel="icon" href="../../back/images/icons/蜜雪logo.svg">
  <!--不同屏幕尺寸根字体设置-->
  <script src="../js/base.js"></script>
  <!--element-ui的样式-->
  <link rel="stylesheet" href="../../back/plugins/element-ui/index.css" />
  <!--引入vant样式-->
  <link rel="stylesheet" href="../styles/vant.min.css"/>
  <!-- 引入样式  -->
  <link rel="stylesheet" href="../styles/index.css" />
  <!--本页面内容的样式-->
  <link rel="stylesheet" href="../styles/main.css" />
  <style>
    .el-dialog__wrapper{
      height: 100%!important;
    }
    .el-form-item {
      margin-bottom: 21rem;
    }
    .el-dialog__header {
      padding: 20px 20px 10px;
      height: 17rem;
    }
    .el-button + .el-button {
      margin-left: 0px;
    }
    .el-dialog__headerbtn .el-dialog__close {
      font-size: 21rem;
    }
    .el-dialog {
      position: relative;
      margin: 0 auto 50px;
      border-radius: 2px;
      box-sizing: border-box;
      width: 90%;
      margin-top: 22vh !important;
    }
    .el-input {
      position: relative;
      font-size: 14px;
      display: inline-block;
      width: 90%;
      margin-left: 20rem;
    }
    .el-input__inner{
      height: 36rem;
    }
    .el-form-item__error {
      color: #F56C6C;
      font-size: 12rem;
      line-height: 1;
      padding-top: 3rem;
      position: absolute;
      top: 100%;
      left: 21rem;
    }
    .el-button--medium{
      height: 42rem;
      font-size: 17rem;
margin-top: 7rem;
      line-height: 30rem;
    }
    .el-dialog__headerbtn .el-dialog__close{
      font-size: 10rem;
    }
    .el-input__inner {
    font-weight: 100;
      font-size: 17rem;
    }
  </style>
</head>
<body>
<div id="main" class="app">
    <i class="el-icon-arrow-left" @click="goBack" style="    font-size: 20rem;
    top: 26rem;
    position: absolute;
    left: 27rem;"></i><div>
  <p style="    font-size: 21rem;
    text-align: center;
    margin-bottom: 46rem;
    margin-top: 22rem;
    color: black;">&nbsp;欢迎登录</p>
</div>
  <div class="divSplit" style="     height: 1px;
    opacity: 1;
    background-color: rgb(209 209 209);
    border: 0px;
    margin-top: -26rem;
    margin-bottom: 27rem;"></div>
  <el-button  type="primary" @click="loginVisible=true" style="    top: 30%;
    height: 50rem;
    color: #FFF;
    background-color: #409EFF;
    border-color: #409EFF;
    position: absolute;
    left: 25%;
    width: 50%;
    font-size: 20rem;
    border-radius: 20rem;">登录</el-button>
  <el-button  type="primary" @click="regVisible=true" style="top: 45%;
    height: 50rem;
    color: rgb(0 158 255);
    background-color: unset;
    border-color: rgb(64, 158, 255);
    position: absolute;
    left: 25%;
    width: 50%;
    font-size: 20rem;
    border-radius: 20rem;">注册</el-button>
  <el-button  type="primary" @click="phoneVisible=true" style="     top: 60%;
    height: 50rem;
    color: rgb(255, 255, 255);
    background-color: rgb(129 36 83);
    border-color: rgb(129, 36, 83);
    position: absolute;
    left: 25%;
    width: 50%;
    font-size: 20rem;
    border-radius: 20rem;">手机号登录</el-button>
  <el-dialog  :visible.sync="loginVisible">
    <div>
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" >

        <el-form-item prop="username">
          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入用户名" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item prop="password">

          <el-input v-model="loginForm.password" type="password" placeholder="密码"  maxlength="20"
                  ></el-input>
        </el-form-item>
        <el-form-item style="width:100%;">
          <el-button class="login-btn" size="medium" type="primary" style="width:80%;margin-left: 10%"
                     @click.native.prevent="handleLogin">
            <span>点击登录</span>

          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
  <el-dialog  :visible.sync="regVisible">
    <div>
      <el-form ref="loginForm" :model="regForm" :rules="regRules" >

        <el-form-item prop="username">
          <el-input v-model="regForm.username" type="text" auto-complete="off" placeholder="请输入用户名" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item prop="password">

          <el-input v-model="regForm.password" type="password" placeholder="密码"  maxlength="20"
                   ></el-input>
          <el-input style="margin-top: 21rem;" v-model="regForm.password2" type="password" placeholder="确认密码"  maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item style="width:100%;">
          <el-button class="login-btn" size="medium" type="primary" style="width:80%;margin-left: 10%"
                     @click.native.prevent="toRegister">
            <span>注册</span>

          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
  <el-dialog  :visible.sync="phoneVisible">
    <div>
      <el-form ref="loginForm" :model="phoneForm" :rules="phoneRules" >

        <el-form-item prop="userPhone">
          <el-input v-model="phoneForm.userPhone" type="text" auto-complete="off" placeholder="请输入手机号" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item prop="code" style="width: 50%">

          <el-input v-model="loginForm.code" type="text" placeholder="验证码"  maxlength="6"
          ></el-input>
        </el-form-item>
        <el-form-item style="        margin-left: 66%;
    margin-top: -57rem;">
            <el-button style="    width: 94rem;
    height: 39rem;
    /* line-height: 19rem; */
    font-size: 14rem;" type="success" @click="getCode()">发送验证码</el-button>

          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>






</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../back/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../back/plugins/element-ui/index.js"></script>
<!-- 引入vant样式 -->
<script src="../js/vant.min.js"></script>
<!-- 引入axios -->
<script src="../../back/plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../js/common.js"></script>
<script src="../api/main.js"></script>
</body>
<script>
  new Vue({
    el:'#main',
    data() {
      return {
        loginForm:{
          username: '',
          password: ''
        },
        regForm:{
          username: '',
          password: '',
          password2:''
        },
        phoneForm:{
          userPhone:'',
          code:''
        },
        local_data:'',
        loginVisible:false,
        regVisible:false,
        phoneVisible:false,
        loading: false
      }
    },
    computed: {
      loginRules() {
        const validateUsername = (rule, value, callback) => {
          if (value.length < 6 ) {
            callback(new Error('用户名必须6位以上'))
          } else {
            callback()
          }
        }
        const validatePassword = (rule, value, callback) => {
          if (value.length < 6) {
            callback(new Error('密码必须在6位以上'))
          } else {
            callback()
          }
        }

       return {
         'username': [{ 'validator': validateUsername, 'trigger': 'blur' }],
         'password': [{ 'validator': validatePassword, 'trigger': 'blur' }]
       }


      },
      regRules() {
        const validateUsername = (rule, value, callback) => {
          if (value.length < 6 ) {
            callback(new Error('用户名必须6位以上'))
          } else {
            callback()
          }
        }
        const validatePassword = (rule, value, callback) => {
          if (value.length < 6) {
            callback(new Error('密码必须在6位以上'))
          } else {
            callback()
          }
        }
        return {
          'username': [{ 'validator': validateUsername, 'trigger': 'blur' }],
          'password': [{ 'validator': validatePassword, 'trigger': 'blur' }]
        }
      },
      phoneRules() {
        const validateUserPhone = (rule, value, callback) => {
          if (value.length!== 11) {
            callback(new Error('请输入正确的手机号！'))
          } else {
            callback()
          }
        }
        const validateCode = (rule, value, callback) => {
          if (value.length<1) {
            callback(new Error('请输入验证码！'))
          } else {
            callback()
          }
        }
        return {
          'userPhone': [{ 'validator': validateUserPhone, 'trigger': 'blur' }],
          'code': [{ 'validator': validateCode, 'trigger': 'blur' }],
        }


      },
    },
    created() {
    },
    methods: {
      async handleLogin() {
        this.$refs.loginForm.validate(async (valid) => {
          if (valid) {
            this.loading = true
            let res = await loginApi(this.loginForm)
            if (String(res.code) === '1') {
              localStorage.setItem('userInfo',JSON.stringify(res.data))
              window.location.href= '../../index.html'
            } else {
              this.$message.error(res.msg)
              this.loading = false
            }
          }
        })
      },
      goBack(){
        history.go(-1)
      },
      //网络图片路径转换
      imgPathConvert(path){
        return imgPath(path)
      },
      toRegister(){
        if (this.regForm.password2!==this.regForm.password){
          this.$message.error("两次密码不正确！")
        }else {
          alert("注册成功！")
        }
      },
      phoneLogin(){},
      getCode(){},
      //跳转到去结算界面
      toAddOrderPage(){
        if(this.cartData.length > 0){
          window.requestAnimationFrame(()=>{
            window.location.href ='/front/page/add-order.html'
          })
        }
      },
      toUserPage(){
        window.requestAnimationFrame(()=>{
          window.location.href= '/front/page/user.html'
        })
      },
      toMenuPage(){
        window.requestAnimationFrame(()=>{
          window.location.href= '/front/page/menu.html'
        })
      },
      toMesPage(){
        window.requestAnimationFrame(()=>{
          window.location.href= '/front/page/msg.html'
        })
      },
      toIndexPage(){
        window.requestAnimationFrame(()=>{
          window.location.href= '/front/index.html'
        })
      },
    }
  })
</script>
</html>
